
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>浑水摸鱼小组</title>
    <link rel="stylesheet" type="text/css" href="./reset.css" />
    <link rel="stylesheet" type="text/css" href="./solarSystemStyle.css" />
</head>
<body>
  <div class="container">
    <!-- 3d照片墙 -->
    <div class="demo-perspective-photo">
      <div id="contentContainer">
        <div id="carouselContainer">
          <figure class="mod-sun">
			  <a href="###" style="font-size: 24px; color: #fff;">太阳系</a>
			  <a href="###" style="font-size: 24px; color: #fff;">
            <div class="x">
              <div class="x1"></div>
              <div class="x2"></div>
              <div class="xInner"></div>
              <div class="y"></div>
              <div class="y1"></div>
              <div class="y2"></div>
              <div class="yInner"></div>
              <div class="z"></div>
              <div class="z1"></div>
              <div class="z2"></div>
              <div class="zInner"></div>
            </div>
			</a>
          </figure>
          <figure class='example example1'>
			   <a href="###" style="font-size: 24px; color: #fff;">水星</a>
			     <a href="####" style="font-size: 24px; color: #fff;">
            <div class="x">
              <div class="x1"></div>
              <div class="x2"></div>
              <div class="xInner"></div>
              <div class="y"></div>
              <div class="y1"></div>
              <div class="y2"></div>
              <div class="yInner"></div>
              <div class="z"></div>
              <div class="z1"></div>
              <div class="z2"></div>
              <div class="zInner"></div>
            </div>
			</a>
          </figure>
          <figure class='example example2'>
			  <a href="###" style="font-size: 24px; color: #fff;">金星</a>
			    <a href="####" style="font-size: 24px; color: #fff;">
            <div class="x">
              <div class="x1"></div>
              <div class="x2"></div>
              <div class="xInner"></div>
              <div class="y"></div>
              <div class="y1"></div>
              <div class="y2"></div>
              <div class="yInner"></div>
              <div class="z"></div>
              <div class="z1"></div>
              <div class="z2"></div>
              <div class="zInner"></div>
            </div>
			</a>
          </figure>
          <figure class='example example3'>
			  <a href="./diqiu/index.html" style="font-size: 24px; color: #fff;">地球</a>
			    <a href="./diqiu/index.html" style="font-size: 24px; color: #fff;">
            <div class="x">
              <div class="x1"></div>
              <div class="x2"></div>
              <div class="xInner"></div>
              <div class="y"></div>
              <div class="y1"></div>
              <div class="y2"></div>
              <div class="yInner"></div>
              <div class="z"></div>
              <div class="z1"></div>
              <div class="z2"></div>
              <div class="zInner"></div>
            </div>
			</a>
          </figure>
          <figure class='example example4'>
			  <a href="###" style="font-size: 24px; color: #fff;">火星</a>
			    <a href="####" style="font-size: 24px; color: #fff;">
            <div class="x">
              <div class="x1"></div>
              <div class="x2"></div>
              <div class="xInner"></div>
              <div class="y"></div>
              <div class="y1"></div>
              <div class="y2"></div>
              <div class="yInner"></div>
              <div class="z"></div>
              <div class="z1"></div>
              <div class="z2"></div>
              <div class="zInner"></div>
            </div>
			</a>
          </figure>
          <figure class='example example5'>
			  <a href="./muxing/index.html" style="font-size: 24px; color: #fff;">木星</a>
			    <a href="./muxing/index.html" style="font-size: 24px; color: #fff;">
            <div class="x">
              <div class="x1"></div>
              <div class="x2"></div>
              <div class="xInner"></div>
              <div class="y"></div>
              <div class="y1"></div>
              <div class="y2"></div>
              <div class="yInner"></div>
              <div class="z"></div>
              <div class="z1"></div>
              <div class="z2"></div>
              <div class="zInner"></div>
            </div>
			</a>
          </figure>
          <figure class='example example6'>
			  <a href="###" style="font-size: 24px; color: #fff;">土星</a>
			    <a href="####" style="font-size: 24px; color: #fff;">
            <div class="x">
              <div class="x1"></div>
              <div class="x2"></div>
              <div class="xInner"></div>
              <div class="y"></div>
              <div class="y1"></div>
              <div class="y2"></div>
              <div class="yInner"></div>
              <div class="z"></div>
              <div class="z1"></div>
              <div class="z2"></div>
              <div class="zInner"></div>
            </div>
			</a>
          </figure>
          <figure class="circle circle1"></figure>
          <figure class="circle circle2"></figure>
          <figure class="circle circle3"></figure>
          <figure class="circle circle4"></figure>
          <figure class="circle circle5"></figure>
          <figure class="circle circle6"></figure>
        </div>
      </div>
    </div>
  </div>

  <script src="./jquery-1.8.0.min.js"></script>
  <script src="./TweenMax.min.js"></script>
  <script src="./solarSystem.js"></script>
  <script>
    $('.demo-perspective-photo,#contentContainer').css('height',$(window).height());
  </script>
</html>
